.

iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

昨天我們一起研究了 SwiftUI 中一些常見的 View Modifiers,像是 padding()background() 等等。今天,我們要來更進一步,看看進階的 View Modifiers,甚至自己動手試試看客製化 Modifier。

這些進階技巧看起來可能有點複雜,但我相信我們一起摸索的話,肯定能搞懂其中的奧秘。如果你是新讀者,還沒看前面的文章,可以先回顧複習一下 Day 5 文章唷!準備好一起深入挖掘了嗎?讓我們開始吧!

使用 modifier(:) 來客製化

在我們日常使用 SwiftUI 的過程中,有時候會發現一組常見的 Modifiers 總是要一起使用,並且有許多 UI 元件要使用一樣的 Modifiers ,這時候我們就可以考慮建立一個客製化的 Modifier,把這些常用的設計打包成一個。

struct TitleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundStyle(.blue)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(10)
    }
}

這段程式建立一個名為 TitleStyle 的自訂 Modifier,我們可以將它應用到任何文字元件上,讓文字看起來更像標題。這樣做不僅可以讓程式碼更簡潔,也可以保持設計風格的一致性。

我們來試著用這個客製化的 Modifier 吧!

Text("Welcome to SwiftUI!")
    .modifier(TitleStyle())

https://ithelp.ithome.com.tw/upload/images/20240919/20168462H0yYgBM9Uc.png

使用 modifier(TitleStyle()) 後,這段文字就會自動應用我們剛剛設計好的樣式,是不是方便多了?

參考資料:modifier(:) | Apple Developer Documentation

使用 Extension 讓程式碼更簡潔

雖然可以直接使用 .modifier(TitleStyle()) 來為我們的 Text 設定樣式,但這樣直接使用自訂 Modifier 的寫法不夠直覺,格式也不一致。

為了解決這個問題,我們可以利用 extension 來擴展 View,使其具備這個客製化的樣式方法。這樣不僅讓程式碼更直覺,還能與 SwiftUI 內建的 Modifiers 格式保持一致,看起來較統一。

extension View {
    func titleStyle() -> some View {
        self.modifier(TitleStyle())
    }
}

現在,我們可以這樣使用:

Text("Welcome to SwiftUI!")
    .titleStyle()
    .padding()

這樣的寫法讓程式碼看起來更加簡潔,並且更符合 SwiftUI 的風格。

增加客製化 Modifier 的參數

有時候,我們希望客製化的 Modifier 能夠接受不同的參數,這樣就可以根據不同的需求來應用不同的樣式。讓我們來看一下如何為客製化的 Modifier 增加參數。

struct HighlightedText: ViewModifier {
    var color: Color

    func body(content: Content) -> some View {
        content
            .padding()
            .background(color)
            .cornerRadius(8)
            .shadow(radius: 5)
    }
}

這段程式碼建立一個名為 HighlightedText 的自訂 Modifier,並且接受一個 color 參數,這樣我們就可以根據需要設置不同的背景顏色。

接著,我們可以通過 extension 來讓這個參數的使用變得更直覺:

extension View {
    func highlightedText(with color: Color) -> some View {
        self.modifier(HighlightedText(color: color))
    }
}

現在,我們可以這樣使用:

Text("Custom Highlight!")
    .highlightedText(with: .yellow)
    .padding()

https://ithelp.ithome.com.tw/upload/images/20240919/20168462EgKOkCDSxa.png

很方便吧!這樣的寫法可以將 App 內的常用格式建立成客製化的 Modifier,使得程式碼更具一致性和可讀性。

總結

今天我們一起挖掘了進階的 View Modifiers,還試著建立自己的客製化 Modifier。經過今天的練習,真的是深深感覺到 SwiftUI 這種宣告式的語法真的很方便啊!今天就先到這邊,明天我們再接再厲,大家明天見囉~


上一篇
Day 5: 探索 SwiftUI 強大的 View Modifiers
下一篇
Day 7: 認識 SwiftUI 的 State 與 Binding
系列文
用 SwiftUI 掌控家庭日用品庫存30
.
圖片
  直播研討會

尚未有邦友留言

立即登入留言